<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData" :rules="rules">
				<view class="box">
					<uni-forms-item label="添加方式">
						<uni-data-checkbox v-model="FormData.type" :localdata="type" @change="typeChange"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item required label="费用名称" name="bill_title">
						<uni-easyinput type="text" v-model="FormData.bill_title" :clearable="false" placeholder="请输入费用名称" />
					</uni-forms-item>
					<uni-forms-item required label="记账金额" name="bill_money">
						<uni-easyinput type="digit" v-model="FormData.bill_money" :clearable="false" placeholder="请输入记账金额" />
					</uni-forms-item>
					<block v-if="FormData.type == 0">
						<uni-forms-item required label="待收日期" name="bill_date">
							<picker mode="date" @change="bindDate" :value="FormData.bill_date">
								<view class="picker-input">
									{{ FormData.bill_date }}
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
					</block>
					<block v-else-if="FormData.type == 1">
						<uni-forms-item required label="开始日期" name="start_date">
							<picker mode="date" @change="bindStart" :value="FormData.start_date">
								<view class="picker-input">
									{{ FormData.start_date }}
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item required label="结束日期" name="end_date">
							<picker mode="date" @change="bindEnd" :value="FormData.end_date" :start="FormData.start_date">
								<view class="picker-input">
									{{ FormData.end_date }}
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item required label="待收日期" name="month">
							<picker mode="multiSelector" @change="bindSetDate" :range="array">
								<view class="picker-input">
									{{ dateWord }}
									<uni-icons type="right" size="16" color="#bbb"></uni-icons>
								</view>
							</picker>
						</uni-forms-item>
					</block>
				</view>
				<view class="create" hover-class="hoverClass" @click="create">生成账单</view>
				<view class="list">
					<view class="bill" v-for="(item, index) in bill" :key="index">
						<view class="head">
							<view class="name">{{ item.bill_title }}</view>
							<view class="del" @click="delBill(index)">
								<uni-icons type="minus" size="24" color="#e43d33"></uni-icons>
							</view>
						</view>
						<view class="bot">
							<view class="money income" v-if="item.bill_type == 'income'">{{ Number(item.bill_money).toFixed(2) }}元</view>
							<view class="money payed" v-else-if="item.bill_type == 'payed'">-{{ Number(item.bill_money).toFixed(2) }}元</view>
							<view class="date">{{ item.bill_date }}</view>
						</view>
					</view>
				</view>
				<view class="btns" v-if="bill.length > 0">
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dateWord: '',
			FormData: {
				type: 0,
				bill_title: '',
				bill_money: '',
				bill_date: '',
				start_date: '',
				end_date: '',
				month: '',
				day: ''
			},
			bill: [],
			rules: {
				bill_title: {
					rules: [
						{
							required: true,
							errorMessage: '请填写费用名称'
						}
					]
				},
				bill_money: {
					rules: [
						{
							required: true,
							errorMessage: '请填写记账金额'
						}
					]
				},
				bill_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择待收日期'
						}
					]
				},
				start_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开始日期'
						}
					]
				},
				end_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择结束日期'
						}
					]
				},
				month: {
					rules: [
						{
							required: true,
							errorMessage: '请选择待收日期'
						}
					]
				}
			},
			type: [
				{
					text: '单笔添加',
					value: 0
				},
				{
					text: '批量添加',
					value: 1
				}
			],
			array: [['每1月', '每2月', '每3月'], []]
		};
	},
	onLoad() {
		this.getArray();
	},
	methods: {
		typeChange(e) {
			this.$refs.form.clearValidate();
		},
		bindDate(e) {
			this.FormData.bill_date = e.detail.value;
		},
		bindStart(e) {
			this.FormData.start_date = e.detail.value;
		},
		bindEnd(e) {
			this.FormData.end_date = e.detail.value;
		},
		bindSetDate(e) {
			this.FormData.month = e.detail.value[0] + 1;
			this.FormData.day = e.detail.value[1] + 1;
			this.dateWord = this.array[0][e.detail.value[0]] + '-' + this.array[1][e.detail.value[1]];
		},
		delBill(index) {
			this.bill.splice(index, 1);
		},
		create() {
			this.$refs.form.validate().then((res) => {
				let form = Object.assign({}, this.FormData);
				if (form.type == 0) {
					this.bill.push({
						bill_title: form.bill_title,
						bill_money: form.bill_money,
						bill_date: form.bill_date,
						bill_type: 'income',
						is_pay: 0
					});
				} else if (form.type == 1) {
					let dateList = this.getMonthBetween(form.start_date, form.end_date, form.day);
					for (let i = 0; i < dateList.length; i++) {
						let tpl = {
							bill_title: form.bill_title,
							bill_money: form.bill_money,
							bill_date: dateList[i],
							bill_type: 'income',
							is_pay: 0
						};
						if (i % form.month == 0) {
							this.bill.push(tpl);
						}
					}
				}
			});
		},
		submit() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			let arr = this.bill;
			prevPage.$vm.billPayNotUpdate(arr);
			uni.navigateBack();
		},
		getArray() {
			for (let i = 0; i < 31; i++) {
				this.array[1].push(Number(i + 1) + '号收款');
			}
		},
		getMonthBetween(start, end, day) {
			let list = [];
			var s = start.split('-');
			var e = end.split('-');
			var min = new Date();
			var max = new Date();
			min.setFullYear(s[0], s[1] * 1 - 1, s[2]);
			max.setFullYear(e[0], e[1] * 1 - 1, e[2]);
			var current = min;
			while (current <= max) {
				var year = current.getFullYear();
				var month = current.getMonth() + 1 < 10 ? '0' + (current.getMonth() + 1) : current.getMonth() + 1;
				var lastDate = new Date(year, month, 0).getDate();
				var d = day < 10 ? '0' + day : day;
				var dd = d < lastDate ? d : lastDate;
				list.push(year + '-' + month + '-' + dd);
				current.setMonth(month);
			}
			return list;
		}
	}
};
</script>

<style lang="scss">
.formBox {
	.create {
		padding: 0 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		margin-bottom: 20rpx;
		background: #fff;
		text-align: center;
		font-size: 30rpx;
		color: $uni-primary;
	}
	.list {
		.bill {
			background: #fff;
			padding: 20rpx;
			border-bottom: 1px solid #f0f0f0;
			&:last-child {
				border-bottom: none;
			}
			.head {
				display: flex;
				justify-content: space-between;
				.name {
					font-size: 28rpx;
					font-weight: bold;
				}
			}
			.bot {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: $uni-secondary-color;
				.income {
					color: #1ecb6b;
				}
				.payed {
					color: #ee5959;
				}
			}
		}
	}
}
</style>
